<template>
  <div>
    <div class="itemOrder" v-for="(item, index) in goodsArea.products" :key="index" @click="onItemCLick">
      <div class="up">
        <p class="price">{{goodsArea.name}}</p>
      </div>
      <div class="content">
        <img class="mainImg" :src=item.pic>
        <div class="con-right">
          <div class="con-text">
            <h1>{{item.name}}</h1>
          </div>
        </div>
      </div>
      <div class="comment">
        <textarea placeholder="宝贝满足你的要求了吗？说出你的品尝心得，分享给更多的人吧！" v-model="item.text"></textarea>
      </div>
      <img-uploader maxPicNum="5"
                    toast-tip="不可超过五张"
                    @getPics="getImgList"
                    @beforeLoad="showLoading"
                    @afterLoad="dismissLoading"
                    :index="index"
      />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Moment from 'moment';
  import ImgUploader from '../order/ImgUploader';

  export default {
    components: {ImgUploader},
    name: 'itemComment',
    data() {
      return {
        item: this.itemObj, // 订单信息
        trade: this.tradeStatus, // 交易状态
        content: '', // 评论内容
        img: [] // 评论图片
      };
    },
    props: {
      goodsArea: {
        type: Object
      },
      orderId: {
        type: String
      },
      mem: {
        type: Number
      },
      memLong: {
        type: Number
      }
    },
    created() {
    },
    methods: {
      upItemComment() {
        // 上传这条订单的所有商品评价,每个商品ID不同，所以要用个循环!!!!
        // content：评论内容
        // img：图片，(此处是数组)
        // product：商品id
        // order：订单id
        let sttDt = new Map(this.goodsArea.products.map((item, i) => [i, item]));
        for (let [key, item] of sttDt) {
          this.$Spread.stateComment = true;
          if (item.text) {
            if (item.text.length > 150 || item.text.length < 15) {
              this.$Spread.stateComment = false;
              this.$toast('评论长度为15到200个汉字!');
            }
          } else {
            this.$toast('评论未填写!');
            this.$Spread.stateComment = false;
          }
          if (this.mem + 1 === this.memLong) {
            if (key + 1 === this.goodsArea.products.length) {
              this.$emit('checkState');
            }
          }
        }
      },
      uploadData() {
        // 上传数据了这次是真的上传了调用接口
        let sttTd = new Map(this.goodsArea.products.map((item, i) => [i, item]));
        for (let [key, item] of sttTd) {
          this.upItemCommentOnce(this.orderId, item.id, item.img, item.text);
          if (this.mem + 1 === this.memLong) {
            if (key + 1 === this.goodsArea.products.length) {
              this.$router.push({name: 'orderList'});
            }
          }
        }
      },
      upItemCommentOnce(order, product, img, content) {
        this.$Spread.NewUserOrderCommentUp({
          order: order,
          product: product,
          img: img,
          content: content
        }).then(res => {
          this.$toast(res.data.msg);
        }, (err) => {
          this.$toast(err.data.msg);
          return false;
        });
      },
      getImgList(index, outIndex) {
        this.goodsArea.products[outIndex].img.splice(index, 1);
        },
      showLoading() {
      },
      dismissLoading(file, index) {
        // 上传图片
        if (this.goodsArea.products[index].img) {
          this.goodsArea.products[index].img.push(file);
        } else {
          this.goodsArea.products[index].img = [];
          this.goodsArea.products[index].img.push(file);
        }
      },
      onItemCLick() {
        this.$emit('onItemCLick', this.index);
      },
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      }
    },
    watch: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .itemOrder {
    width: 96vw
    margin 10px auto
    padding: 0 2vw 2vw;
    box-sizing border-box
    background white
    border-radius(5px)
    .up {
      width: 100%
      padding: 3vw 0 1vw;
      bor-b();
      flex-x();
      .time {
        word-vw(14, first-ash)
      }
      .price {
        word-vw(14, main-color)
      }
    }
    .content {
      padding 3vw 0 4vw
      flex-x(flex-start)
      position relative
      bor-b();
      .mainImg {
        width: vw(40)
        height: vw(40)
        margin-right 3vw
      }
      .con-right {
        flex-x(flex-start)
        flex: 1
        .con-text {
          h1 {
            word-vw(14, first-ash)
            line-height 1.5
            multi(2)
          }
          p {
            margin-top 10px
            word-vw(12, third-ash)
          }
        }
        .con-text1 {
          flex: 1;
          flex-x()
          P {
            flex: 1;
            text-align: center;
            word-vw(15, third-ash)
          }
        }
      }
    }
    .comment {
      textarea {
        &::-webkit-input-placeholder {
          word-vw(12, third-ash)
        }
        word-vw(12, first-ash)
        width: 100%;
        height: 22vw;
        padding: 2vw;
        line-height: 1.5;
      }
    }
    .text-bt {
      position absolute
      bottom: 10px
      right: 10px
      button {
        background none
        border(main-color);
        word-vw(14, main-color)
        border-radius(20px)
        padding: 3px 6px;
      }
    }
  }

  .icon {
    width: 3vw
    height: 3vw
    fill: third-ash
  }
</style>
